<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath %>">
		<meta charset="utf-8">
		<title>在线代码解释器</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href=css/bootstrap.min.css>
		<link rel="stylesheet" href=css/bootstrap-table.min.css>
	</head>
	<body >
		<%@include file="/header.jsp" %>
		<div class="container">
		<h1>我的代码</h1>
		<hr />
		<div>
              <div class="form-inline conditionForm" role="form">
                  
                  <div class="form-group">
                      <span>代码名称: </span>
                      <input id="codeName" class="form-control" type="text" >
                      <span>编程语言：</span>
                      <select name="" id="language">
                      	<option value="-1">不限</option>
                      	<c:forEach items="${languages }" var="lan">
                      		<option value="${lan.id }">${lan.name }</option>
                      	</c:forEach>
                      </select>
                  </div>
                  <button type="button" class="btn btn-success" onclick="searchInfo();" ><i class="glyphicon glyphicon-search"></i> 查询</button>
              </div>
          </div>
		<table id="codeList"
            	data-url="code/list" data-id-field="id" data-side-pagination="server" 
            	data-method="post" data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
            	data-pagination="true" data-page-list="[10, 25, 50, 100, ALL]" data-page-size="10"
            	data-show-columns="true" data-show-refresh="true"  data-show-export="true" data-toolbar="#toolbar">
                 <thead>
                     <tr>
                     	<th data-field="state" data-checkbox="true"></th>
                        <th data-field="id">编号</th>
                        <th data-field="name">代码名称</th>
                        <th data-field="language.name">开发语言</th>
                        <th data-field="createDate">创建日期</th>
                        <th data-field="lastModifyUser.nickName">最后一次修改用户</th>
                        <th data-field="lastModifyDate">最后修改日期</th>
                        <th data-field="publics">是否共享</th>
                        <th data-formatter="operateFormatter">操作</th>
                     </tr>
                 </thead>
             </table>
             <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
             <script type="text/javascript" src="js/bootstrap.min.js"></script>
             <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
             <script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script>
             <script type="text/javascript">
		var $table = $("#codeList");
		$table.bootstrapTable({
			queryParams: function(params){
				params["name"] = $("#codeName").val();
				params["language.id"] = $("#language").val();
				return params;
			}
		});
		//自定义操作列
		function operateFormatter(value, row, index) {
			
	        return [
	        		'<a href="javascript:void(0)" title="Share" onclick="shareCode('+row.id+','+row.publics+');">',
	            '<i class="glyphicon glyphicon-star"></i>',
	            '</a>&nbsp;&nbsp;',
	            '<a href="code/edit?id='+row.id+'" title="Edit" >',
	            '<i class="glyphicon glyphicon-pencil"></i>',
	            '</a>&nbsp;&nbsp;',
	            '<a href="javascript:void(0)" title="Remove" onclick="deleteRecord(\'code/delete\','+row.id+');">',
	            '<i class="glyphicon glyphicon-remove"></i>',
	            '</a>&nbsp;&nbsp;',
	            '<a href="code/view/'+row.id+'" title="View" >',
	            '<i class="glyphicon glyphicon-qrcode"></i>',
	            '</a>&nbsp;&nbsp;'
	        ].join('');
        }

		function shareCode(codeId,state){
			console.log(codeId + " " + state);
			if(state == false){
				if(confirm("确定要共享代码吗？")){
					$.post("code/share",{id:codeId, state:1},function(){
						$table.bootstrapTable("refresh");
					});
				}
			}else{
				if(confirm("确定要取消共享代码吗？")){
					$.post("code/share",{id:codeId, state:0},function(){
						$table.bootstrapTable("refresh");
					});
				}
			}
		}
		
		function searchInfo(){
			$table.bootstrapTable("refresh");
		}

		/**
		 * 删除单条数据
		 * @param url 删除数据的服务端地址
		 * @param id 要删除的数据编号
		 */
		function deleteRecord(url, id) {
			if(confirm("确定要删除该代码吗？")){
				$.post(url, {
					"id" : id
				}, function(data) {
					$table.bootstrapTable("refresh");
				});
			}
		}
				
	</script>
		</div>
	</body>
</html>
